<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <style>
      * {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <button id="stop">停止</button>
    <!-- <div class="uuu" style="width: 200px; height: 500px; background: red">
      qwe 你好啊实打实多 qwe 你好啊实打实多 qwe 你好啊实打实多 qwe
      你好啊实打实多 qwe 你好啊实打实多
      <h1>
        askdlj
        <span>1 23</span>
      </h1>
    </div> -->
    <div class="uuu2">asd</div>
    <div class="uuu2">asd</div>
    <button id="btn">按钮</button>
    <input class="box" data="666" type="checkbox" />
    <input class="box" data="666" type="checkbox" />
    <input class="box" data="666" checked type="checkbox" />
    <a id="runoob" href="http://asdasd">asdasdsa</a>
    <p>hello world</p>
    <p>nice</p>
    <p>good man</p>
  </body>
  <script>
    $(function () {
      $('#btn').click(function () {
        // $('<span>Hello world!</span>').replaceAll('p:last')
        $('p').replaceWith("<span title='replaceWith'>Rainier</span>")
        // $('input').wrap('<div></div>')
        // $('input').wrapAll('<div></div>')
        // $('#runoob').attr('href', function (i, origValue) {
        //   console.log(i, origValue)
        //   return origValue + '/jquery'
        // })
        // $('#runoob').removeAttr('href')
        // $('div').animate({ width: '800px' }, 4000, function () {
        //   alert(123)
        // })
        // var div = $('div')
        // div.animate({ height: '800px', opacity: '0.4' }, 6000, function () {
        //   console.log(1)
        // })
        // div.animate({ width: '800px', opacity: '0.8' }, 6000, function () {
        //   console.log(2)
        // })
        // div.animate({ height: '100px', opacity: '0.4' }, 6000, function () {
        //   console.log(3)
        // })
        // div.animate({ width: '100px', opacity: '0.8' }, 6000, function () {
        //   console.log(4)
        // })
        // div.animate({ height: '800px', opacity: '0.4' }, 6000, function () {
        //   console.log(5)
        // })
        // div.animate({ width: '800px', opacity: '0.8' }, 6000, function () {
        //   console.log(6)
        // })
        // console.log($('div').text())
      })
      $('#stop').click(function () {
        $('input').unwrap()
        // $('div').stop(true, true)
        // $('#p1').css('color', 'red')
        // $('#p1').slideUp(2000)
        // $('#p1').slideDown(2000)
        // $('#p1').css('color', 'red').slideUp(2000).slideDown(2000)
      })
    })
  </script>
</html>
